<template>
  <div>
    <el-form-item :style="{'width':formItem.width + 'px'}">
      <el-divider content-position="center">
        <span class="page-text">第{{formItem.labelIndex}}页 / 共{{allPageNum}}页</span>
        <span class="to">{{getQsIndex2Index}}</span>
      </el-divider>
    </el-form-item>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const props = defineProps({
  formItem: {
    type: Object,
  },
})
const formDesign = computed(()=>{return store.getters.formDesignInfo})
const formComponents = computed(() => {return formDesign.value.formItemList || []});
const allPageNum = computed(()=>{return formDesign.value.allPageNum})
const formItem = computed(()=>{
  return props.formItem
})
// 从第几题到第几题
const getQsIndex2Index = computed(() => {
  let startIndex = formItem.value.startCmp + 1
  let endIndex = formItem.value.endCmp
  let startLabelIndex, endLabelIndex
  if(!formItem.value.noQs){
    if(formComponents.value[startIndex]?.labelIndex){
      startLabelIndex = formComponents.value[startIndex].labelIndex
    }else if(formComponents.value[startIndex + 1]){
      startLabelIndex = formComponents.value[startIndex + 1].labelIndex
    }
    endLabelIndex = formComponents.value[endIndex].labelIndex
  }
  if(formItem.value.noQs || !startLabelIndex || !endLabelIndex){
    return '（此页尚未添加题目）'
  }else if(startLabelIndex === endLabelIndex){
    return `（第${startLabelIndex}题）`
  }else{
    return `（第${startLabelIndex}-${endLabelIndex}题）`
  }
})
</script>

<style scoped lang='scss'>
.el-divider{
  margin: 20px 0 10px;
}
.page-text{
  font-weight: 600;
  font-size: 16px;
}
.to{
  color: #666;
}
</style>